Mobx의 useLocalStore와 useAsObservable

사내 프론트엔드의 상태관리는 Mobx로 하고 있다. Redux에 비해서 간결하고, 쓰기 쉽다는 장점 때문에 도입하게 되었지만, 막상 써보니 예상치 못한 에러가 나고, 공식 문서 외에 최근 볼만한 글들이 없어서 사실상 삽질하면서 일을 하고 있다. 그 중, 한가지 이슈에 대해 공유하고자 이 글을 쓴다.

• 이슈 정리 요약 이슈 정리를 간단히 요약해보았다. 부모 컴포넌트의 computed한 값을 자식 컴포넌트의 Props로 내려줄 때, 당연히 자식컴포넌트에서 계속 변경되는 값을 가지고 있을거라 생각했는데, 그렇지 않았던 문제였다. 흑마법을 너무 맹신한 잘못이었다.

공식문서 상에서는 외부에서 상태 변경을 하게되면 감지하는 방법이 2가지 있다.

• useLocalStore 공식문서를 보면, 두번쨰 인자에 값을 주어서, 해당 값이 바뀌면 감지하도록 하는 방법이 있었다.

const useLocalStore =
  (observableProps => ({
    text: observableProps.text,
  }),
  props)

• 상태 아웃소싱 useAsObservableSource()에 값을 넣어서 값을 관찰하게 한다.

const observableValue = useAsObservableSource(props)

mobx - useLocalStore

라이브러리를 살펴보면, 함수를 통해 리턴하는 객체와, 관찰할 두번째 인자를 initializer, current라는 이름으로 각각 받고있다. mobx.observable로 관찰하는 대상을 찾아서, 값이 바뀌는 것을 넣고, 그렇지 않으면 새로 만들어서 리턴해주는 형태이다.

transaction은 업데이트 되는 것을 일괄처리하기 위해 사용하는데, wrapTransaction은 이를 wrapping한 함수이다. 즉, get()을 관찰하지만, 안의 return하는 식이 바뀌지 않아서 관찰을 못했던 것 같다.

참고

• mobx
• hyunseob : Hello, MobX